import React, { Component } from 'react'
import { connect } from 'dva'
import { Card, List, Avatar, Button, message, Popconfirm } from 'antd';
import { Link } from 'react-router-dom'
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

@connect(state => {
  const {articles:{latest}} = state
  return {latest}
})
class Latest extends Component {

  componentDidMount(){
    // message.success("喔")
    this.props.dispatch({
      type:'articles/fetchLatest'
    })
  }

  itemRender = item => {
      const {id, title, content} = item
      return (
        <div>
          <h2>
            <Link to={`/articles/show/${id}`}>
              标题：{title}
            </Link>
            <Button type="default" id={item.id} onClick={this.delArticles} style={{float:"right"}}>删除</Button>
          </h2>
          <p>内容： {content}</p>
        </div>
      )
    }

    delArticles = e =>{
      const index = e.target.id
      const l = this.props.latest
      console.log(l);
      l.splice(l.indexOf(l.find(all => all.id==index)),1)
      this.setState({})
    }

    render() {
      const {latest} = this.props
        return (
          <PageHeaderLayout
            title="最近文章">
            <Card bordered={false}>
              <List
                itemLayout="horizontal"
                dataSource={latest}
                renderItem={this.itemRender}
              />
            </Card>
          </PageHeaderLayout>
        )
    }
}

export default Latest
